<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full h-[100vh] login-page">
    <ul class="w-full h-full flex flex-col sm:flex-row items-center justify-center gap-10">
      <li
        class="w-auto p-3 md:p-6 lg:p-8 bg-white rounded-lg flex items-center justify-center gap-5"
      >
        <div class="leading-loose">
          <p class="md:text-xl lg:text-2xl" style="font-family: 'MiSans-Demibold'">圖書館</p>
          <p class="text-sm md:text-base lg:text-lg mt-3 mb-8">海量圖書資料任你翻閱~</p>
          <a-button type="primary" @click="nav('/library')">立即進入</a-button>
        </div>
        <img
          src="../assets/images/select-books.png"
          alt=""
          class="size-30 md:size-35 lg:size-40 object-cover"
        />
      </li>
      <li
        class="w-auto p-3 md:p-6 lg:p-8 bg-white rounded-lg flex items-center justify-center gap-5"
      >
        <div class="leading-loose">
          <p class="md:text-xl lg:text-2xl" style="font-family: 'MiSans-Demibold'">個人中心</p>
          <p class="text-sm md:text-base lg:text-lg mt-3 mb-8">上傳作業查看評分都在這裡~</p>
          <a-button type="primary" @click="nav('/user-info')">立即進入</a-button>
        </div>
        <img
          src="../assets/images/select-student.png"
          alt=""
          class="size-30 md:size-35 lg:size-40 object-cover"
        />
      </li>
      <!-- <li class="w-auto p-10 bg-white rounded-lg flex items-center justify-center">
        <div class="leading-loose">
          <p class="text-3xl" style="font-family: 'MiSans-Demibold'">個人中心</p>
          <p class="text-lg mt-3 mb-8">上傳作業查看評分都在這裡~</p>
          <a-button type="primary" @click="nav">立即進入</a-button>
        </div>
        <img src="../assets/images/select-student.png" alt="" class="w-50 h-50 object-cover" />
      </li> -->
    </ul>
  </div>
</template>
<script lang="ts" setup>
import { useRouter } from 'vue-router'
const router = useRouter()

const nav = (url: string) => {
  router.push(url)
}
</script>

<style scoped>
.login-page {
  background: url('../assets/images/select-bg.png') no-repeat center center;
  background-size: cover;
}
</style>
